<template>
	<div>
		<!-- 按钮 -->
	     <el-upload
	       class="upload"
	       action=""
	       :multiple="false"
	       :show-file-list="false"
	       accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
	       :http-request="httpRequest">
	       <el-button size="small" type="primary">读取</el-button>


	     </el-upload>
      <el-button size="small" @click="uploadData">上传</el-button>
	     <!-- 按钮 end -->
	     <br />
         <!-- 列表 -->
	        <el-table
	          :data="tableData"
	          border
	          style="width: 100%">
	          <el-table-column
	            prop="用户名"
	            label="用户名"
	            width="180">
	          </el-table-column>
	          <el-table-column
	            prop="密码"
	            label="密码">
	          </el-table-column>
            <el-table-column
              prop="真实姓名"
              label="真实姓名">
            </el-table-column>
            <el-table-column
              prop="注册时间"
              label="注册时间">
            </el-table-column>
            <el-table-column
              prop="备注"
              label="备注">
            </el-table-column>
	        </el-table>
       	 <!-- 列表 end -->
     </div>
</template>

<script>
import XLSX from 'xlsx'
import { cmcUrl } from '../../../../static/baseUrl'

export default {
	data () {
		return {
			excelTitle:['用户名','密码','真实姓名','注册时间','备注'],//导出excel的表头，与excelColumn，需一一对应
			excelColumn:['userName','pwd','realName','registTime','note'],//导出excel每列对应的数据，
			tableData: []
		}
	},
	methods: {
	    httpRequest (e) {
	      let file = e.file // 文件信息
	      console.log('e: ', e)
	      console.log('file: ', e.file)

        if (!file) {
          // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据自己需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }

        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
			console.error("ev==",ev);
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary' // 以字符编码的方式解析
            })
			console.error("workbook==",ev);
            const exlname = workbook.SheetNames[0] // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
            console.log(exl)
            // 将 JSON 数据挂到 data 里
            this.tableData = exl;
            this.tableData.forEach((item) => {
              console.log("item,,",item);
            });

            //this.uploadData();
          } catch (e) {
            console.log('出错了：：')
            return false
          }
        }
        fileReader.readAsBinaryString(file)
      },
      uploadData(){
		console.log(this.tableData, "this.tableData");
        if(this.tableData.length>0){

		  let dataArr = this.translateKeys();
		  console.log(dataArr, "dataArr");
          let params = {
            flag:1,
            datas:dataArr,
          }
          this.$axios({
              method: "post",
              url: `/CMC/excel/import/upload`,
              data: params,
            })
            .then((res) => {
              console.log(res, "上传数据");
              if (res.code == 200) {
                //this.tableData = res.data.list;
                this.$message.success(res.message);
              } else {
                this.$message.success(res.message);
              }
            })
            .catch((err) => {});
        }else{
          console.log("this.tableData.length==",this.tableData.length);
        }
      },
	  translateKeys(){

	    let tempArr = [];
	    Object.keys(this.tableData).forEach((item) => {
	  	  let tempMap = {};
	  	  let mm = this.tableData[item];
		  console.log("mmmm=",mm);
	  	  Object.keys(this.excelTitle).forEach((item) => {
	  	    let ss = this.excelTitle[item];
	  	    let key = this.excelColumn[item];
			if(mm[ss]){
			  this.$set(tempMap,key,mm[ss]);
			}else{
			  this.$set(tempMap,key,"");
			}

	  	  });
		  console.log("tempMap=",tempMap);
	  	  tempArr.push(tempMap);
	    })
	    return tempArr;
	  },
  },
}
</script>
